<template>
  <div class="star">
        <!-- 头部标签 -->
 <header>
     <van-nav-bar
  title="快递单评价"
  left-arrow
  @click-left="onClickLeft"
  right-text="提交"
   @click-right="onClickRight"
/>
 </header>
 <!-- 总评分 -->
 <div class="total">
     <p class="first">总体评分</p>
     <p class="age">{{total}}<i>分</i></p>
     <p class="simle"><van-rate v-model="value"  color="#ffd21e" icon="smile" void-icon="smile-o" /></p>
 </div>
 <van-divider
  :style="{ borderColor: 'gray',paddingTop: '.01rem' }"
></van-divider>
<!-- 内容 -->
<div class="cent">
    
   <ul>
        <span>店铺评分  </span>
       <li>  <i>店铺评分</i> <van-rate 
  v-model="value1"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/></li>
  <li>  <i>物流速度</i> <van-rate 
  v-model="value2"
  :size="25"
  color="#fe8e5b"
  void-icon="star"
  void-color="#eee"
/></li>
  <li>  <i>快递评分</i> <van-rate 
  v-model="value3"
  :size="25"
  color="#ff5f5e"
  void-icon="star"
  void-color="#eee"
/></li>
   </ul>
 </div>
  <van-field v-model="value4"  type="textarea" rows="4" autosize placeholder="写几句评价" />
  <!-- 添加图片 -->
  
     
      

  <van-grid :border="false" :column-num="3">
  <van-grid-item>
    <van-image class="posi" src="https://img01.yzcdn.cn/vant/apple-1.jpg" /><p class="pic"> <img src="../../assets/快递单/delete.png" alt=""></p>
  </van-grid-item>
  <van-grid-item>
    <van-image :src="src2" /><span>1/5</span>
  </van-grid-item>
  
</van-grid>
  </div>
</template>

<script>
import {starEvaluate} from '../../request/api'
export default {
data(){
    return{
        value:0,
         value1:0,
         value2:0,
          value3:0,
          value4:'',
         src2:require('@/assets/快递单/xiangji.png'),
         
    }
},
created(){
    console.log(this.$route.params.id,this.$route.params.val);
},
methods:{
  onClickLeft() {
      this.$router.push('/star')
    },
    onClickRight(){
      starEvaluate({
         shop:this.value1,
         logistics:this.value2,
         express:this.value3,
         totalScore:this.value,
         orderCode:this.$route.params.val,
         id:this.$route.params.id,
         info:this.value4
      }).then(res=>{
        console.log(res);
      })
      this.$router.push('/star')
    }
},
computed:{
    total(){
        let tot=parseInt((this.value1+this.value2+this.value3)*2/3)
        this.value=tot/2
        return tot
    }
}
}
</script>

<style lang='less' >
.star{
  header{
    background: #003399;
    .van-nav-bar{background:#003399;
font-size: .2rem;
 
padding:3% 0 0;
.van-nav-bar__title,.van-nav-bar__text{
    color: white;
    font-size: .2rem;
}
.van-icon{
    font-size: .2rem;
    color: white;
}
     }
    
}
.total{
    text-align: center;
    p{
        padding: 2.5%;
    }
    .first{
        font-size: .18rem;
        color: #aaaaaa;
    }
    .age{
        font-size: .4rem;
        color:#ffd21e ;
    }
   .simle{
      padding: 2.5% 0 0 0;
    }
    .van-rate__icon{
        font-size: .4rem;
    }
}
.cent{
  background: white;
  margin: 0 0 4% 0 ;
  font-size: .18rem;
  span{
      color: #003399;
      background: #f4fbfe;
      line-height: .45rem;
  }
  ul{
      .van-rate__item{
         line-height: .45rem;
      } 
    margin: 0  4%;
     li{
         
    line-height: .45rem;
    display: flex;
    p{
        width: 25%;
    }
    i{
          width: 25%;
    }
    
  }
  }
 
}
.van-field{
    font-size: .18rem;
}
.posi{
    position: relative;
}
.pic{
    position: absolute;
    top:10%;
    right: 0;
}
}
</style>    